<template>
	<div class="all">
		<div class="left" v-if="shouma">
			<left @shouqilai="shou"></left>
		</div>
		<div class="left2" @click="shou" v-if="!shouma">开</div>
		<div class="right" ref="right">
			<div class="top">
				<top></top>
			</div>
			<div class="content" v-loading="loading">
				<div class="flex">
					<div class="hli back lan" style="cursor: pointer;" @click="go('/ka')"> <i class="el-icon-arrow-left"></i> 返回列表</div>
					<div class="hli cu">接入号码：<span class="ju">{{tableData.iccid}}</span></div>
					<div class="hli cu">当前状态：
					<!-- 					0 未使用  1 已缴费   2是欠费断网  3是次月生效 4是自助停机 5注销   reason
										0停机 1 正常使用  2 标记换卡 3是待生效(绑卡之后就是待生效，无论什么时候生效) -->
						<span class="ju" v-if="tableData.status == 0">停机</span>
						<span class="ju" v-if="tableData.status == 1">正常使用</span>
						<span class="ju" v-if="tableData.status == 2">标记换卡</span>
						<span class="ju" v-if="tableData.status == 3">待生效</span>
					</div>
					<div class="hli cu">原因：
						<span class="ju" v-if="tableData.reason == 0">未使用</span>
						<span class="ju" v-if="tableData.reason == 1">已缴费</span>
						<span class="ju" v-if="tableData.reason == 2">欠费断网 </span>
						<span class="ju" v-if="tableData.reason == 3">次月生效</span>
						<span class="ju" v-if="tableData.reason == 4">自助停机</span>
						<span class="ju" v-if="tableData.reason == 5">注销</span>
					</div>
				</div>
				<div class="flexb" style="margin-top: 30px;">
					<div class="flex">
						<el-button type="warning" @click="kacaozuo(1)">账户解绑</el-button>
						<el-button type="warning" @click="kacaozuo(2)">设备解绑</el-button>
						<el-button type="warning" @click="kacaozuo(3)">微信登录解绑</el-button>
						<el-button type="warning" @click="dinggoulog = true">订购流量</el-button>
						<el-button type="warning" @click="zhuanjie">流量结转</el-button>
						<el-button type="warning" @click="kacaozuo(5)">缴费开网</el-button>
						<el-button v-if="iszxshow" type="danger" icon="el-icon-switch-button" @click="kacaozuo(6)">注销</el-button>
						<el-button type="primary" icon="el-icon-refresh" @click="kacaozuo(8)">刷新</el-button>
					</div>
					<div>
						<el-checkbox v-model="huanka" @change="kacaozuo(7)">标记换卡</el-checkbox>
					</div>
				</div>

				<div class="flex title">详情信息</div>
				<div class="table">
					<el-table :data="list" border style="width: 100%">
						<el-table-column label="套餐名">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.title }}</span>
							</template>
						</el-table-column>
						<el-table-column label="流量包">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.flow }}</span>
							</template>
						</el-table-column>
						<el-table-column v-if="isadmin" label="额度">
							<template slot-scope="scope">
							{{ scope.row.allowCredit }}
							<i class="el-icon-edit" style="cursor: pointer;" @click="changeed(scope.row.allowCredit)"></i>
							</template>
						</el-table-column>
						<el-table-column v-if="isadmin" label="虚值">
							<template slot-scope="scope">
							{{ scope.row.limitNum }}%
							<i class="el-icon-edit" style="cursor: pointer;" @click="changexz(scope.row.limitNum)"></i>
							</template>
						</el-table-column>
						<el-table-column label="本月用量">
							<template slot-scope="scope">
							{{ scope.row.curentFlow[0] }}
								<!-- <div v-if="userIdentity != 2">{{ scope.row.curentFlow[0] }}</div>
								<div>{{ scope.row.curentFlow[1] }}</div> -->
								<!-- <div style="color: #f00; cursor: pointer;">点击查询</div> -->
							</template>
						</el-table-column>
						<el-table-column label="上月用量">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.lastFlow }}</span>
							</template>
						</el-table-column>
						<el-table-column label="达量断网阈值">
							<template slot-scope="scope">
								{{ scope.row.flowBan[0] }}
								<!-- <div v-if="userIdentity != 2">{{ scope.row.flowBan[0] }} -->
								<!-- <i class="el-icon-edit" style="margin-left: 20px; color: #f00; cursor: pointer;" @click="xiugai(scope.row.iccid,scope.row.flowBan[0])"></i> -->
								<!-- </div> -->
								<!-- <div>{{ scope.row.flowBan[1] }}</div> -->
								
							</template>
						</el-table-column>

						<el-table-column label="是否达量断网">
							<template slot-scope="scope">
								<!-- <span style="margin-left: 10px">{{ scope.row.isCutNetFlow }}</span> -->
								<span style="margin-left: 10px" v-if="scope.row.isCutNetFlow == 1">正常</span>
								<span style="margin-left: 10px" v-if="scope.row.isCutNetFlow == 0">断网</span>
							</template>
						</el-table-column>
						<el-table-column label="是否断网">
							<template slot-scope="scope">
								<!-- <span style="margin-left: 10px">{{ scope.row.isCutNet }}</span> -->
								<span style="margin-left: 10px" v-if="scope.row.status == 1">开网</span>
								<span style="margin-left: 10px" v-if="scope.row.status == 0">断网</span>
							</template>
						</el-table-column>
						<el-table-column label="是否实名">
							<template slot-scope="scope">
								<span style="margin-left: 10px" v-if="scope.row.isRealName == 1">实名</span>
								<span style="margin-left: 10px" v-if="scope.row.isRealName == 0">未实名</span>
								
							</template>
						</el-table-column>
						<el-table-column label="是否注销">
							<template slot-scope="scope">
								<span style="margin-left: 10px" v-if="scope.row.delFlag == 1">是</span>
								<span style="margin-left: 10px" v-if="scope.row.delFlag != 0">否</span>
								
							</template>
						</el-table-column>
						<el-table-column label="是否停机保号">
							<template slot-scope="scope">
								<span style="margin-left: 10px" v-if="scope.row.reason == 5">是</span>
								<span style="margin-left: 10px" v-if="scope.row.reason != 5">否</span>
							</template>
						</el-table-column>
						<el-table-column label="创建时间" width='180px'>
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.createTime }}</span>
							</template>
						</el-table-column>
						<el-table-column label="更新时间" width='180px'>
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.updateTime }}</span>
							</template>
						</el-table-column>
					</el-table>
				</div>

				<div class="flex title">历史订购</div>
				<div class="table">
					<el-table :data="list3" border style="width: 100%">
						<el-table-column label="订购到期月份">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.payMonth }}</span>
							</template>
						</el-table-column>
						<el-table-column label="订购类型">
							<template slot-scope="scope">
								<span style="margin-left: 10px" v-if="scope.row.type == 1">扣月租</span>
								<span style="margin-left: 10px" v-if="scope.row.type == 2">购买流量叠加包</span>
								<span style="margin-left: 10px" v-if="scope.row.type == 4">结转流量/活动赠送</span>
							</template>
						</el-table-column>
						<el-table-column label="流量包">
							<template slot-scope="scope">
								<span style="margin-left: 10px" v-if="scope.row.type != 4">{{ scope.row.title }}</span>
								<span style="margin-left: 10px" v-if="scope.row.type == 4">{{scope.row.packageId}}</span>
							</template>
						</el-table-column>
						<el-table-column label="订购金额">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.price }}</span>
							</template>
						</el-table-column>
						<el-table-column label="订购时间">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.createTime }}</span>
							</template>
						</el-table-column>
						<el-table-column label="套餐截止时间">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.endTime }}</span>
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button type="text" v-if="scope.row.delFlag == 0 && scope.row.type != 4" @click="tuiding(scope.row.id)">退订</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="flex title">参加活动</div>
				<div class="table">
					<el-table :data="list4" border style="width: 100%">
						
						<el-table-column label="参与活动时间">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.time }}</span>
							</template>
						</el-table-column>
						<el-table-column label="活动内容">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.title }}</span>
							</template>
						</el-table-column>
						<el-table-column label="剩余次数">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.count }}</span>
							</template>
						</el-table-column>
						
					</el-table>
				</div>
				<div class="flex title">操作记录</div>
				<div class="kali lan">
					<div class="flex" v-for="item in list2" :key="item.id">
						<div style="margin: 5px 10px;">{{item.createTime}}</div>
						
						<div style="margin: 5px 10px;">{{item.name_dictText}}</div>
						<div style="margin: 5px 10px;">{{item.request}}</div>
					</div>
				</div>
			</div>
		</div>
		<el-dialog title="新增套餐" :visible.sync="log" :close-on-click-modal="false" width="600px">
			<div class="flex">
				<div class="f1">按区间:</div>
				<div class="f2">
					<el-input v-model="taocan.mobile" style="width: 200px;" placeholder="起始ICCID"></el-input>
					-
					<el-input v-model="taocan.mobile" style="width: 200px;" placeholder="结束ICCID"></el-input>
				</div>
			</div>
			<div class="flex">
				<div class="f1">按导入:</div>
				<div class="f2">
					<el-button type="warning">导入文件</el-button>
				</div>
			</div>
			<div class="flex">
				<div class="f1">选择代理商:</div>
				<div class="f2">
					<el-select v-model="value" clearable placeholder="选择代理商">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="log = false">取 消</el-button>
				<el-button type="primary" @click="tianjia">确 定</el-button>
			</span>
		</el-dialog>
		
		<el-dialog title="订购流量" :visible.sync="dinggoulog" :close-on-click-modal="false" width="600px">
			

			<div class="flex">
				<div class="f1">赠送多少GB:</div>
				<div class="f2">
					<el-input v-model="flow" style="width: 200px;" placeholder="赠送多少GB"></el-input>
				</div>
			</div>

			<span slot="footer" class="dialog-footer">
				<el-button @click="dinggoulog = false">取 消</el-button>
				<el-button type="primary" @click="dinggougo">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 修改虚值 -->
		<el-dialog title="修改虚值" width="500px" :visible.sync="isshowxz">
			<div style="display: flex;align-items: center;">
				<div>修改虚值：</div>
				<el-input style="width: 300px;" v-model="changelimitNum"
				 autocomplete="off"></el-input>
				&nbsp; %
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="isshowxz = false">取 消</el-button>
				<el-button type="primary" @click="changexzbtn">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 修改额度 -->
		<el-dialog title="修改额度" width="500px" :visible.sync="isshowed">
			<div style="display: flex;align-items: center;">
				<div>修改额度：</div>
				<el-input style="width: 300px;" v-model="changeedNum"
				 autocomplete="off"></el-input>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="isshowed = false">取 消</el-button>
				<el-button type="primary" @click="changeedbtn">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import bus from '@/assets/bus.js'
	export default {
		name: 'kaxiangqing',
		components: {
			left,
			top
		},
		data() {
			return {
				huanka: false,
				options: [],
				taocan: {
					mobile: ""
				},
				changecon: {

				},
				search: {
					iccid: "",
					time: "",
					start: "",
					end: ""
				},
				log: false,
				log2:false,
				page: 1,
				page_size: 20,
				total: 0,
				loading: true,
				tableData: "",
				list: [],
				list2: [],
				list3:[],
				list4:[],
				
				dinggoulog:false,
				userIdentity:0,
				flow:"",
				shouma:true,
				iszxshow:true,
				changelimitNum:'',
				changeedNum:'',
				isshowed:false,
				isshowxz:false,
				isadmin:false

			}
		},
		watch: {
			// num:function(newValue, oldValue) {
			//   console.log(newValue, oldValue)
			// }
		},
		computed: {
			// zongjia:function(){
			//   return this.num * 100
			// }
		},
		async created() {
			console.log('---')
			var site = JSON.parse(localStorage.getItem('person'));
			console.log(site.username)
			if(site.username=='13022753292'){
				this.iszxshow = false
			}
			if(site.username=='admin'){
				this.isadmin = true
			}


			await this.getlist()
			await this.getjilu()
			await this.getjilu2()
			await this.getyhlist()
			
			this.loading = false
			
			this.userIdentity = JSON.parse(localStorage.getItem('person')).userIdentity
		},
		methods: {
			shou:function(){
				this.shouma = !this.shouma
				this.$refs.right.style.width = "100%"
			},
			dinggougo:function(){
				this.axios.post(this.url + `/work/card/sendFlow?flow=${this.flow}&iccid=${this.$route.query.iccid}`)
					.then(response => {
						if (response.data.success == true) {
							this.getlist()
							this.getjilu()
							this.getjilu2()
							this.$message.success('操作成功');
							this.dinggoulog = false
						} else {
							this.$message.error(response.data.message);
						}
					})
			},
			tuiding:function(id){
				this.$confirm('确认要退订吗？', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				}).then(({ value }) => {
				  this.axios.post(this.url + `/work/orderRecharge/cancelOrder?id=` + id)
				  	.then(response => {
				  		if (response.data.success == true) {
				  			this.getlist()
				  			this.getjilu()
							this.getjilu2()
				  			this.$message.success('操作成功');
				  		} else {
				  			this.$message.error(response.data.message);
				  		}
				  	})
				})
			},
			xiugai:function(id,zhi){
				this.$prompt('请输入修改值', '修改值'+zhi, {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				}).then(({ value }) => {
				  this.axios.post(this.url + `/work/card/setCardValue?num=` + value + `&iccid=` + id)
				  	.then(response => {
				  		if (response.data.success == true) {
				  			this.getlist()
				  			this.getjilu()
							this.getjilu2()
				  			this.$message.success('操作成功');
							
				  		} else {
				  			this.$message.error(response.data.message);
				  		}
				  	})
				})
			},
			kacaozuo: function(type) {
				this.$confirm('确定执行此操作吗?', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
				  this.axios.post(this.url + `/work/card/sendOrder?type=` + type + `&iccid=` + this.$route.query.iccid)
				  	.then(response => {
				  		if (response.data.success == true) {
				  			this.getlist()
				  			this.getjilu()
				  			this.$message.success('操作成功');
				  		} else {
				  			this.$message.error(response.data.message);
				  		}
				  	})
				})
				
			},
			zhuanjie: function() {
				this.$prompt('请输入结转iccid', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(({
					value
				}) => {
					this.axios.post(this.url + `/work/card/sendOrder?type=4&iccid=` + this.$route.query.iccid + `&toIccid = ` + value)
						.then(response => {
							if (response.data.success == true) {
								this.getlist()
								this.getjilu()
								this.$message.success('操作成功');
							} else {
								this.$message.error(response.data.message);
							}
						})
				})

			},
			go: function(url, id) {
				this.$router.push({
					path: url
				})
			},
			timechange: function() {
				if (this.search.time == null) {
					this.search.start = ""
					this.search.end = ""
				} else {
					this.search.start = this.search.time[0]
					this.search.end = this.search.time[1]
				}
			},
			//翻页
			fanye: function(page) {
				this.loading = true
				this.page = page
				this.getlist()
			},
			//获取操作记录
			getjilu: async function() {
				await this.axios.get(this.url + `/work/card/recordList?cardId=` + this.$route.query.id)
					.then(response => {
						if (response.data.success == true) {
							this.list2 = response.data.result.records
						} else {
							this.$message.error(response.data.message);
						}
					})
			},
			//获取历史订购
			getjilu2: async function() {
				await this.axios.get(this.url + `/work/orderRecharge/list?iccid=` + this.$route.query.iccid)
					.then(response => {
						if (response.data.success == true) {
							this.list3 = response.data.result.records
						} else {
							this.$message.error(response.data.message);
						}
					})
			},
			//获取列表
			getlist: async function() {
				await this.axios.get(this.url + `/work/card/findInfoById?id=` + this.$route.query.id)
					.then(response => {
						if (response.data.success == true) {
							this.list = [response.data.result]
							for(let i in this.list){
								this.list[i].curentFlow = this.list[i].curentFlow.split('-')
								this.list[i].flowBan = this.list[i].flowBan.split('-')
							}
							this.tableData = response.data.result
							// this.list.push(this.tableData)
						} else {
							this.$message({
								type: "error",
								message: '获取电信数据错误，刷新页面试试吧',
								center: true,
								duration: 5
							});
						}
					})
			},
			tianjia: function() {

			},
			change: function() {
				this.log = true
			},
			//打开修改弹窗
			changexz(num){
				this.isshowxz = true
				this.changelimitNum = num
			},
			//修改虚值
			changexzbtn(){
				if(this.changelimitNum>100){
					this.$message.error('请输入0-100');
				}else{
					
					this.axios.post(this.url + `/work/card/editLimit?id=`+this.$route.query.id+'&limitNum='+this.changelimitNum)
						.then(response => {
							if (response.data.success == true) {
								this.isshowxz=false
								this.getlist()
								this.$message({
          							message: '操作成功',
									type: 'success'
								});
							} else {
								this.$message.error(response.data.message);
							}
						})
				}
			},
			//打开修改弹窗
			changeed(num){
				this.isshowed = true
				this.changeedNum = num
			},
			//修改虚值
			changeedbtn(){
				
					this.axios.post(this.url + `/work/card/edit?id=`+this.$route.query.id+'&allowCredit='+this.changeedNum)
						.then(response => {
							if (response.data.success == true) {
								this.isshowed=false
								this.getlist()
								this.$message({
          							message: '操作成功',
									type: 'success'
								});
							} else {
								this.$message.error(response.data.message);
							}
						})
				
			},
			//获取列表
			getyhlist: async function() {
				await this.axios.get(this.url + `/work/awbCardPreferential/queryByIccid?iccid=` + this.$route.query.iccid)
					.then(response => {
						if (response.data.success == true) {
							console.log('活动列表')
							console.log(response.data.result)
							this.list4.push(response.data.result)
						} 
					})
			},
			
		},

	}
</script>

<style scoped lang="less">
	.all {
		display: flex;
		height: 100vh;

		.left {
			width: 200px;
			height: 100%;
			background: #414652;
			box-shadow: 0 2px 10px #2D3038;
		}

		.right {
			width: calc(100% - 180px);
			height: 100%;
			overflow: auto;

			.content {
				padding: 20px;

				.table {
					margin-top: 10px;
				}

				.hli {
					margin-right: 30px;
					font-size: 18px;
				}

				.title {
					font-size: 18px;
					font-weight: bold;
					margin-top: 30px;
				}

				.kali {
					line-height: 30px;
					font-size: 14px;
				}
			}
		}
	}
</style>
